<script setup lang="ts">
import { reactive } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { AppData } from "@/utils/app";

import FormButton from "@/components/form/button.vue";

onLoad(() => {
  AppData.initConfig((config) => {
    infoData.join_qr_code = config.op_shop_url;
  });
});

const infoData = reactive({ join_qr_code: "" });
</script>

<template>
  <image class="detail-bg" src="@/package/other/static/wechat-index-bg.png" />

  <view class="detail-desc"
    >长按识别二维码，添加客服为好友<text style="color: #ff7900"
      >微信回复「开店」，</text
    >即有专业客服为您提供帮助哦～
  </view>

  <view class="detail-code">
    <image class="detail-code-img" :src="infoData.join_qr_code" />
    <image
      class="detail-code-trigger"
      :src="infoData.join_qr_code"
      show-menu-by-longpress
    />
  </view>

  <view class="detail-btn">
    <FormButton>
      <image
        class="detail-btn-icon"
        src="@/package/other/static/wechat-index-finger.png"
      />
      长按识别二维码
    </FormButton>
  </view>
</template>

<style lang="scss">
page {
  padding-top: 100rpx;
}

.detail-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 670rpx;
}

.detail-desc {
  position: relative;
  margin-bottom: 60rpx;
  font-size: 32rpx;
  color: #333333;
  line-height: 44rpx;
  font-weight: bold;
  text-align: center;
}

.detail-code {
  position: relative;
  width: 300rpx;
  height: 300rpx;
  padding: 60rpx;
  margin: 0 auto 50rpx;
  border-radius: 60rpx;
  background-color: #ffffff;
  box-shadow: 0 0 16rpx 0 rgba(0, 0, 0, 0.05);

  .detail-code-img {
    display: block;
    width: 100%;
    height: 100%;
  }

  .detail-code-trigger {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
  }
}

.detail-btn {
  margin: 0 60rpx 30rpx;

  .detail-btn-icon {
    width: 48rpx;
    height: 48rpx;
    margin-right: 20rpx;
  }
}
</style>